<template>
    <div class="content-wrapper a-base-container">
        <div style="overflow:auto;margin:10px;border: 1px solid #ccc;background: #E5EBF1;height: 98%;">
            <div class="money-main-box">
                <div class="auto-out">
                    <a-statistic :value-style="{ color: '#1890ff' }" style="flex:0 0 150px" title="总佣金" :precision="2" :value="totalCommission?totalCommission:0" />
                    <a-statistic :value-style="{ color: '#faad14' }" style="flex:0 0 150px" title="已提现佣金" :precision="2" :value="withdrawalCommission?withdrawalCommission:0" />
                    <a-statistic :value-style="{ color: '#52c41a' }" style="flex:0 0 150px" title="可提现佣金" :precision="2" :value="surplusCommission?surplusCommission:0" />
                    <a-button style="flex: 0 0 100px" @click="() => {commissionVisible = true}" size="large" type="primary" class="withdrawal-btn">提现</a-button>
                </div>
            </div>

            <!-- <div style="width: 80%;margin: 20px auto;text-align:center">
                <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }" class="user-class">
                    <a-form-item label="银行卡名称">
                        <a-input-search v-model="bankName" style="width:300px" @search="saveBankAccount">
                            <a-button slot="enterButton">保存</a-button>
                        </a-input-search>
                    </a-form-item>
                    <a-form-item label="银行卡卡号">
                        <a-input-search v-model="bankAccount" style="width:300px" @search="saveBankAccount">
                            <a-button slot="enterButton">保存</a-button>
                        </a-input-search>
                    </a-form-item>
                    <a-button style="margin-left:360px" type="primary" @click="() => {commissionVisible = true}">提现</a-button>
                    <a-form-item label="可提现佣金">
                        <a-input-search v-model="surplusCommission" read-only style="width:300px" @search="() => {commissionVisible = true}">
                            <a-button slot="enterButton">提现</a-button>
                        </a-input-search>
                    </a-form-item>
                </a-form>
                
            </div>-->

            <a-tabs @change="callback" v-model="tabKey" style="margin:10px;background:#FFFFFF">
                <a-tab-pane key="2" tab="佣金记录">
                    <a-table :columns="columns" :components="components" :data-source="data" :scroll="{x: 500, y: 500}" style="min-height:200px" bordered :pagination="pagination"></a-table>
                </a-tab-pane>
                <a-tab-pane key="3" tab="提现记录">
                    <a-table :columns="withdrawalColumns" :components="components2" :data-source="withdrawalData" :scroll="{x: 500, y: 500}" style="min-height:200px" bordered :pagination="pagination"></a-table>
                </a-tab-pane>
            </a-tabs>
            <a-modal v-model="commissionVisible" title="提现" centered>
                <a-form :label-col="{ span: 7 }" :wrapper-col="{ span: 12 }" class="user-class">
                    <a-form-item label="银行卡名称">
                        <a-input v-model="bankName" style="width:300px">

                        </a-input>
                    </a-form-item>
                    <a-form-item label="银行卡卡号">
                        <a-input v-model="bankAccount" style="width:300px">

                        </a-input>
                    </a-form-item>
                    <a-form-item label="提现金额">
                        <a-input v-model="commission" placeholder="请输入提现金额" style="width:300px">

                        </a-input>
                    </a-form-item>
                </a-form>
                <!-- <a-input-number v-model="commission" style="width:300px;margin-left:94px;" placeholder="请输入提现金额" /> -->
                <template slot="footer">
                    <a-button key="submit" type="primary" @click="saveBankAccount">立即提现</a-button>
                    <a-button key="back" @click="() => (commissionVisible = false)">取消</a-button>
                </template>
            </a-modal>
        </div>
    </div>
</template>

<script>
import { components } from "@/utils/antTableComponents";
import { getUserInfo, commissionRecord, withdrawalRecord, save, withdrawalCommission } from "@/api/personal/userInfo";
import { numberFormat } from "@/utils/tool/number-formart";

export default {
    data () {
        //佣金
        const columns = [
            {
                title: "订单号",
                dataIndex: "orderNo",
                key: "orderNo",
                align: "left",
                width: 120
            },
            {
                title: "客户信息",
                dataIndex: "companyName",
                key: "companyName",
                width: 120
            },
            {
                title: "实付金额",
                dataIndex: "payAmount",
                key: "payAmount",
                width: 120,
                customRender: (text) => {
                    return text.toFixed(2);
                }
            },
            {
                title: "推客级次",
                dataIndex: "rewardLevel",
                key: "rewardLevel",
                width: 120
            },
            {
                title: "佣金比例(%)",
                dataIndex: "rewardRate",
                key: "rewardRate",
                width: 120
            },
            {
                title: "推客等级",
                dataIndex: "retailLevelName",
                key: "retailLevelName",
                width: 120
            },
            {
                title: "上月等级系数",
                dataIndex: "retailRate",
                key: "retailRate",
                width: 100
            },
            {
                title: "佣金收入(元)",
                dataIndex: "rewardIncome",
                key: "rewardIncome",
                width: 120,
                customRender: (text) => {
                    return text.toFixed(2);
                }
            },
            {
                title: "付款时间",
                dataIndex: "createDate",
                key: "createDate",
                width: 120
            },
        ];
        //提现
        const withdrawalColumns = [
            {
                title: "提现金额",
                dataIndex: "amount",
                key: "amount",
                align: "left",
                width: 120,
                customRender: (text) => {
                    return text.toFixed(2);
                }
            },
            {
                title: "提现银行",
                dataIndex: "bankName",
                key: "bankName",
                width: 120
            },
            {
                title: "银行卡号",
                dataIndex: "bankAccount",
                key: "bankAccount",
                width: 120
            },
            {
                title: "状态",
                dataIndex: "status",
                key: "status",
                width: 120,
                customRender: (text, row, index) => {
                    const status = ["已提现", "待审核", "审核中", "审核驳回", "待打款", "待到账"];
                    return status[text];
                }
            },
            {
                title: "提现时间",
                dataIndex: "createDate",
                key: "createDate",
                width: 120
            }
        ];
        //表格 头部 可伸缩
        this.components = components(columns);
        this.components2 = components(withdrawalColumns);

        return {
            userInfo: {},
            commission: null, //提现金额
            totalCommission: 0, //佣金总收入
            withdrawalCommission: 0, //已提现佣金
            surplusCommission: 0, //剩余佣金
            bankAccount: "", //银行账号
            bankName: "", //银行名称
            commissionVisible: false,
            tabKey: "2",
            columns,
            withdrawalColumns,
            data: [],
            withdrawalData: [],
            postData: {
                "current": 1,
                "size": 20
            },
            pagination: {
                defaultPageSize: 20,
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            }
        };
    },
    mounted () {
        this.getUserInfo();
        this.getCommissionRecord();
    },
    methods: {
        //基本信息
        getUserInfo () {
            getUserInfo().then(response => {
                if (response.code == 200) {
                    this.withdrawalCommission = response.data.withdrawalCommission;
                    this.totalCommission = response.data.totalCommission;
                    this.surplusCommission = this.totalCommission - this.withdrawalCommission;
                    this.bankAccount = response.data.bankAccount;
                    this.bankName = response.data.bankName;
                    this.userInfo = { ...response.data };
                }
            });
        },
        //佣金提现申请
        withdrawal () {
            if (this.commission == null || this.commission == 0) {
                this.$message.error("提现金额必须大于100！");
                return;
            }
            if (this.commission > this.surplusCommission) {
                this.$message.error("可提现金额不足！");
                return;
            }
            withdrawalCommission({ amount: this.commission }).then(response => {
                if (response.code == 200) {
                    this.commissionVisible = false;
                    this.$message.success("提现成功，正在加速审核中");
                    this.getUserInfo();
                }
            });
        },
        //佣金记录
        getCommissionRecord () {
            commissionRecord(this.postData).then(response => {
                if (response.code == 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    Object.assign(this.pagination, {
                        total
                    });
                }
            });
        },
        //提现记录
        getWithdrawalRecord () {
            withdrawalRecord(this.postData).then(response => {
                if (response.code == 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.withdrawalData = records;
                    Object.assign(this.pagination, {
                        total
                    });
                }
            });
        },
        //保存银行卡
        saveBankAccount () {
            const sysUser = {};

            if (!this.bankAccount) {
                this.$message.warning('请输入银行卡号');
                return;
            }
            if (!this.bankName) {
                this.$message.warning('请输入银行卡名称');
                return;
            }
            sysUser.bankAccount = this.bankAccount;
            sysUser.bankName = this.bankName;
            sysUser.id = this.userInfo.userId;
            sysUser.email = this.userInfo.email;
            save(sysUser).then(response => {
                if (response.code == 200) {
                    this.withdrawal();
                }
            });
        },
        //tab切换
        callback (key) {
            console.log(key);
            if (key == 2) {
                this.getCommissionRecord();
            }
            if (key == 3) {
                this.getWithdrawalRecord();
            }
            this.tabKey = key;
        },
        onTableChange (pagination, filters, sorter) {
            console.log("pagination", pagination);
            Object.assign(this.postData, {
                "current": pagination.current,
                "size": pagination.pageSize
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.getShareUserList();
        },
        changePageSize (e) {
            const value = e.target.value;
            const { pagination } = this;
            console.log(e, value);
            Object.assign(this.postData, {
                "size": value
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value)
            });
            this.getShareUserList();
        }
    }
};
</script>
<style scoped>
    .avatar-uploader > .ant-upload {
        width: 110px;
        height: 110px;
    }
    .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }
    .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
    .user-class {
        margin: 20px 0;
    }
    .user-class .ant-form-item {
        margin-bottom: 2px !important;
    }
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }
    .money-main-box {
        padding: 10px;
        background: #ffffff;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
    }
    .ant-statistic >>> .ant-statistic-title {
        font-size: 14px;
    }
    /* .ant-statistic >>> .ant-statistic-content-value-decimal {
                font-size: 16px;
            } */
    .withdrawal-btn {
        margin-top: 20px;
        width: 40px;
    }
    .auto-out {
        width: 50%;
        display: flex;
    }
</style>